<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 摘自《web前端性能优化》田佳奇 -->
    <textarea>
        思路:为什么优化-量化当前性能指标-优化的指标是什么(RAIL性能模型)

        一、为什么要做前端优化
        1、影响用户留存率(用户自注册之后过一段时间,仍然还在使用的用户,除以总注册用户数)
        2、影响网站的转化率(比如有100个人访问,1个人购买,转化率就是1%).
        3、影响用户的体验和产品的传播

        二、性能评估模型 RAIL
        1、R:response,给用户的反馈不要小于100ms
        2、A:animation,动画要流程,帧率要高,尽力达到60fps
        3、I:iadel,空闲,利用浏览器的空闲时间,加载延迟任务,比如画海报
        4、加载:首页加载,不要小于1000ms

        三:量化
        1、通过浏览器的preformance或者灯塔lighthouse找到性能瓶颈
        2、根据页面的生命周期(从输入url到看到网页)来优化

        四、六大优化场景
        1、图像优化
        - 适合使用矢量图的地方使用,尽量使用矢量图,比如logo、文本、控件图标等
        - 使用位图时,尽量压缩
        - 小于阀值的图片,比如10kb,可以转化为base64格式
        - 使用雪碧图,减少图片请求
        2、加载优化
        - 图片懒加载
        - 路由懒加载
        - 相同尺寸资源占位,防止回流
        - DNS预解析
        - 使用CDN
        <link rel="dns-prefetch">
        3、代码优化
        - 标签更加语意话
        - css嵌套层级不易过深
        - 经常使用try-catch捕获错误,增加错误日志,防止页面卡死
        - 复用逻辑抽取
        4、构建优化
        - 压缩合并html、css、js
        - 减少webpack里loader的执行,多使用include和exclude
        - 确保插件的精简与可靠,多使用官方推荐的插件,少使用第三方插件
        - 合理配置resolve参数,精简路径书写层级
        - 可以使用DLLPlugin,不用每次打包都去分析第三方库
        5、渲染优化
        - 事件节流和防抖
        - 降低选择器的复杂性
        6、存储优化
        - 使用浏览器缓存,强缓存和协商缓存
    </textarea>
</body>

</html>